<template>
    <div class="auth-container">
        <!-- @submit.prevent="login" 将表格提交事件绑定到login方法上 -->
        <el-form class="auth-form" ref="formRef" :model="form" label-width="auto" @submit.prevent="login">
            <el-form-item label="用户名" label-width="80px" prop="name">
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" label-width="80px" prop="zone">
                <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from '../axios'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../store/auth'
import { ElMessage } from 'element-plus';
const form = ref({
    username: '',
    password: ''
})

const router = useRouter()

// const token = ref<string | null>(localStorage.getItem('token'))
// const login = async () => {
//     const username: string = form.value.username
//     const password: string = form.value.password
//     // 发送登录请求
//     const resp = await axios.post('/auth/login', { username, password })
//     console.log('login resp:', resp)
//     token.value = resp.data.token
//     localStorage.setItem('token', token.value || '')
//     // 跳转到新闻页
//     router.push({ name: 'News' })
// }

const authStore = useAuthStore();

const login = async () => {
    try {
        await authStore.login(form.value.username, form.value.password)
        router.push({ name: 'News' })
    } catch (error) {
        console.log('Login.vue login err:', error)
        ElMessage.error('Login Failed')
    }
}

</script>

<style scoped>
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    padding: 20px;
    box-sizing: border-box;
}

.auth-form {
    width: 100%;
    max-width: 360px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>